<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>评价</title>
        <link rel="stylesheet" href="<c:url value="/static/wx/css/style.css"/>" />
        <script type="text/javascript" src="<c:url value="/static/wx/js/lib/rem.js"/>"></script>
	</head>
    <body class="bf">
        <div id="wrap">
            <div class="wrap_star">
                <div class="wrap_star_img">
                    <img src="<c:url value="/static/wx/img/star_default_icon.png"/>" />
                    <img src="<c:url value="/static/wx/img/star_default_icon.png"/>" />
                    <img src="<c:url value="/static/wx/img/star_default_icon.png"/>" />
                    <img src="<c:url value="/static/wx/img/star_default_icon.png"/>" />
                    <img src="<c:url value="/static/wx/img/star_default_icon.png"/>" />
                </div>
                <div class="prompt">您对本次服务满意吗</div>
                <ul class="wrap_star_text clearfix">
                </ul>
            </div>
            <div class="wrap_btn none">
                <a href="javascript:void(0)" class="button" id="submit_btn">提交</a>
            </div>
            
            <div class="msg-succ">
                <img src="<c:url value="/static/wx/img/succ_icon.png"/>" /> <span class="f20">提交成功</span> 
            </div>
        </div>
        <input type="hidden" id="userId" value="${evaluateVo.userId }" />
        <input type="hidden" id="orderId" value="${evaluateVo.orderId }" />
        <input type="hidden" id="sendUserId" value="${evaluateVo.sendUserId }" />
        <script type="text/javascript" src="<c:url value="/static/wx/js/lib/jquery-3.3.1.min.js"/>"></script>
        <script type="text/javascript">
            var score,label=[];
            
            var userId = $("#userId").val();
            var orderId = $("#orderId").val();
            var sendUserId = $("#sendUserId").val();
            $('.wrap_star_img img').each(function(index) {
                var htmlStr = "";
                var star = '<c:url value='/static/wx/img/star_default_icon.png'/>'; //普通灰色星星图片的存储路径
                var starRed = '<c:url value='/static/wx/img/star_selected_icon.png'/>'; //红色星星图片存储路径
                var prompt = ['非常不满意 ，各方面都很差', '不满意 ，比较差', '一般，还需改善', '比较满意 ，仍可改善', '非常满意 ']; //评价提示语
                this.id = index; //遍历img元素，设置单独的id

                $(this).on("click", function() { //设置鼠标滑动和点击都会触发事件
                    score=index+1;
                    console.log(score);
                    $(".wrap_btn").removeClass("none");
                    $('.wrap_star_img img').attr('src', star); //当“回滚”、“改变主意”时，先复位所有图片为木有打星的图片颜色
                    $(this).attr('src', starRed); //设置鼠标当前所在图片为打星颜色图
                    $(this).prevAll().attr('src', starRed); //设置鼠标当前的前面星星图片为打星颜色图
                    $(this).parent('.wrap_star_img').siblings('.prompt').text(prompt[this.id]); //根据id的索引值作为数组的索引值

                    if(index == 4) {
                        htmlStr = "";
                        htmlStr += '<li>上门神准时</li>';
                        htmlStr += '<li>服务态度好</li>';
                        htmlStr += '<li>称重准确效率高</li>';
                        htmlStr += '<li>现场清扫整洁</li>';
                    } else {
                        htmlStr = "";
                        htmlStr += '<li>上门不准时</li>';
                        htmlStr += '<li>服务态度恶劣</li>';
                        htmlStr += '<li>称重缺斤少两</li>';
                        htmlStr += '<li>不守信用</li>';
                        htmlStr += '<li>现场处理邋遢</li>';
                        htmlStr += '<li>沟通不积极</li>';
                    }
                    $(".wrap_star_text").html(htmlStr);
                });
            });

            $(".wrap_star_text").on("click", "li", function() {
                $(this).toggleClass("on");
            });
            
            $("#submit_btn").on("click",function(){
                if($(".wrap_star_text li").is(".on")){
                    $(".wrap_star_text li.on").each(function(){
                        var str_ = $(this).html();
                        label.push(str_);
                   })
                }else{
                    
                    alert("评价类别必选");
                    return false;
                }
                label = label.join(); 
                var f = arguments.callee, self = this;
                $(self).unbind('click', f);  
                $.ajax({
                    type:"post",
                    url: "<c:url value="/wx/toSaveEvaluate.do"/>",
                    data:{
                        userId: userId,
                        sendUserId: sendUserId,
                        orderId: orderId,
                        score: score,
                        label: label
                     },
                     cache: true, 
                     async:false, 
                     dataType: "json",
                     success: function(data){
                        if (data.msg == "1") {
                            $(".msg-succ").show();
                             //返回上一层代码
                             var c = 2;
                             var intervalId = setInterval(function () {
                                  c = c - 1;
                                  if (c == 0) {
                                    clearInterval(intervalId);
                                    setTimeout(go(sendUserId), 1000);
                                  }
                              }, 1000)
                        }else{
                            $(self).click(f);
                        }
                     }
                });
            })
            
            function go(sendUserId){
                window.location.href = "<c:url value="/wx/toOrderList.do"/>?id="+sendUserId;
           }
        </script>
    </body>
</html>